<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>jTimepicker - Yet another jQuery time picker plugin.</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/ui/base/ui.core.css" />
        <link rel="stylesheet" type="text/css" href="css/ui/base/ui.theme.css" />
        <link rel="stylesheet" type="text/css" href="css/ui/base/ui.slider.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.timepicker.css" />
        <script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="lib/ui.core.js"></script>
        <script type="text/javascript" src="lib/ui.slider.js"></script>
        <script type="text/javascript" src="lib/jquery.jtimepicker.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#timepicker').jtimepicker();
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>jTimepicker</h1>
            <h2>Yet another jQuery time picker plugin</h2>
            <p>
                <strong>Author:</strong> <a href="http://www.radoslavdimov.com/">Radoslav Dimov</a><br />
                <strong>Version:</strong> 1.4.1 (<a href="changelog.html">Changelog</a>)<br />
                <strong>Download:</strong> <a href="http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-timepicker/jtimepicker.zip">jtimepicker.zip</a><br />
                <strong>Licence:</strong> Dual licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT</a> and <a href="http://www.opensource.org/licenses/gpl-license.php">GPL</a> licenses.
            </p>
            <h3>Contents</h3>
            <ol>
                <li><a href="#Introduction">Introduction</a></li>
                <li><a href="#Examples">Examples</a></li>
                <li><a href="#Getting-Started">Getting started</a></li>
                <li><a href="#Configuration">Configuration</a></li>
                <li><a href="#Compatibility">Compatibility</a></li>
            </ol>
            <a name="Introduction"></a>
            <h3>Introduction</h3>
            <p>
                jTimepicker is a <a href="http://jquery.com">jQuery</a> plugin for set hours, minutes and seconds
                individually with <a href="http://docs.jquery.com/UI/Slider">jQuery UI Slider</a>.
            </p>
            <a name="Examples"></a>
            <h3>Examples</h3>
            <div id="timepicker"></div>
            <br /><br />
            <a name="Getting-Started"></a>
            <h3>Getting started</h3>
            <p>
                To use the jTimepicker plugin, include the <a href="http://jquery.com">jQuery</a>
                library, the jTimepicker source file, the jTimepicker core stylesheet file and
                <a href="http://docs.jquery.com/UI">jQuery UI</a> files inside the <code>&lt;head&gt;</code> tag
                of your HTML document:
            </p>
<pre>
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/ui/base/ui.core.css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/ui/base/ui.theme.css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/ui/base/ui.slider.css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/jquery.timepicker.css&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;lib/jquery-1.3.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;lib/ui.core.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;lib/ui.slider.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;lib/jquery.jtimepicker.js&quot;&gt;&lt;/script&gt;
</pre>
            <p>
                To setup jTimepicker, add the following code inside the <code>&lt;head&gt;</code>
                tag of your HTML document:
            </p>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function() {
        $('#timepicker').jtimepicker({
            // Configuration goes here
        });
    });
&lt;/script&gt;
</pre>
            <p>
                jTimepicker accepts a lot of configuration options, see chapter "<a href="#Configuration">Configuration</a>"
                for further informations.
            </p>

            <p>jTimepicker expects a very basic HTML markup structure inside your HTML document:</p>
<pre>
&lt;div id=&quot;timepicker&quot;&gt;&lt;/div&gt;
</pre>
            <a name="Configuration"></a>
            <h3>Configuration</h3>
            <p>
                jTimepicker accepts a list of options to control the appearance and behaviour
                of the Time Picker. Here is the list of options you may set:
            </p>
            <table> 
                <tr>
                    <th>Property</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
                <tr>
                    <td>clockIcon</td>
                    <td>string</td>
                    <td>"images/icon_clock_2.gif"</td>
                    <td>Located in the images directory (icon_clock_1.gif, icon_clock_2.gif)</td>
                </tr>
                <tr>
                    <td>orientation</td>
                    <td>string</td>
                    <td>"horizontal"</td>
                    <td>Change the orientation of the sliders (horizontal or vertical)</td>
                </tr>
                <tr>
                    <td>hourCombo</td>
                    <td>string</td>
                    <td>"hourcombo"</td>
                    <td>Hour &lt;select&gt; tag class name selector</td>
                </tr>
                <tr>
                    <td>hourMode</td>
                    <td>integer</td>
                    <td>24</td>
                    <td>Hour time format</td>
                </tr>
                <tr>
                    <td>hourInterval</td>
                    <td>integer</td>
                    <td>1</td>
                    <td>Hour interval</td>
                </tr>
                <tr>
                    <td>hourDefaultValue</td>
                    <td>integer</td>
                    <td>0</td>
                    <td>Set hour default value</td>
                </tr>
                <tr>
                    <td>hourSlider</td>
                    <td>string</td>
                    <td>"hourSlider"</td>
                    <td>Hour slider class name selector</td>
                </tr>
                <tr>
                    <td>hourLabel</td>
                    <td>string</td>
                    <td>"hour"</td>
                    <td>Hour slider label</td>
                </tr>
                <tr>
                    <td>minCombo</td>
                    <td>string</td>
                    <td>"mincombo"</td>
                    <td>Minutes &lt;select&gt; tag class name selector</td>
                </tr>
                <tr>
                    <td>minLength</td>
                    <td>integer</td>
                    <td>60</td>
                    <td>Minutes length</td>
                </tr>
                <tr>
                    <td>minInterval</td>
                    <td>integer</td>
                    <td>5</td>
                    <td>Minutes interval</td>
                </tr>
                <tr>
                    <td>minDefaultValue</td>
                    <td>integer</td>
                    <td>0</td>
                    <td>Set minutes default value</td>
                </tr>
                <tr>
                    <td>minSlider</td>
                    <td>string</td>
                    <td>"minSlider"</td>
                    <td>Minutes slider class name selector</td>
                </tr>
                <tr>
                    <td>minLabel</td>
                    <td>string</td>
                    <td>"min"</td>
                    <td>Minutes slider label</td>
                </tr>
                <tr>
                    <td>secView</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>View Seconds &lt;select&gt;</td>
                </tr>
                <tr>
                    <td>secCombo</td>
                    <td>string</td>
                    <td>"seccombo"</td>
                    <td>Seconds &lt;select&gt; tag class name selector</td>
                </tr>
                <tr>
                    <td>secLength</td>
                    <td>integer</td>
                    <td>60</td>
                    <td>Seconds length</td>
                </tr>
                <tr>
                    <td>secInterval</td>
                    <td>integer</td>
                    <td>5</td>
                    <td>Seconds interval</td>
                </tr>
                <tr>
                    <td>secDefaultValue</td>
                    <td>integer</td>
                    <td>0</td>
                    <td>Set seconds default value</td>
                </tr>
                <tr>
                    <td>secSlider</td>
                    <td>string</td>
                    <td>"secSlider"</td>
                    <td>Seconds slider class name selector</td>
                </tr>
                <tr>
                    <td>secLabel</td>
                    <td>string</td>
                    <td>"sec"</td>
                    <td>Seconds slider label</td>
                </tr>
            </table>
            <a name="Compatibility"></a>
            <h3>Compatibility</h3>
            <p>jTimepicker has been tested and works on the following browsers:</p>
            <ul>
                <li>Internet Explorer 6 (PC)</li>
                <li>Internet Explorer 7 (PC)</li>
                <li>FireFox 3.5 (PC/Linux)</li>
                <li>Google Chrome 3.0 (PC)</li>
                <li>Safari 4.0 (PC)</li>
            </ul>
            <h3>Donate a beer or two via PayPal</h3>
            <p>
                <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                    <input type="hidden" name="cmd" value="_s-xclick">
                    <input type="hidden" name="hosted_button_id" value="9375573">
                    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
                </form>
            </p>
        </div>
    </body>
</html>
